<template>
    <div class="login">
        <div class="center">
            <h2>叩丁狼商品管理系统</h2>
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
                <el-form-item prop="username">
                    <el-input prefix-icon="Avatar" v-model="ruleForm.username" type="text" autocomplete="off"
                        placeholder="请输入账号" />
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input prefix-icon="Key" v-model="ruleForm.pwd" type="password" autocomplete="off"
                        placeholder="请输入密码" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import * as http from "@/request/http";
import Cookies from "js-cookie";
import { ElMessage } from 'element-plus'
import { useUserStore } from "@/store/modules/userStore"
import { useRouter } from 'vue-router';


// userStore仓库的实例对象
const userStore = useUserStore();
// 路由对象
const router = useRouter()
const ruleFormRef = ref();
const ruleForm = reactive({
    username: '',
    pwd: '',
})
// 校验账号
function validateUserName(rule: unknown, value: string | undefined, callback: (prompt?: string) => void) {
    if (!value?.trim()) {
        return callback('账号不能为空')
    } else {
        return callback();
    }
}
// 校验密码
function validatePassword(rule: unknown, value: string | undefined | number, callback: (prompt?: string) => void) {
    if (!value) {
        return callback('请输入密码')
    } else {
        return callback();
    }
}
const rules = reactive({
    username: [{ validator: validateUserName, trigger: 'blur' }],
    pwd: [{ validator: validatePassword, trigger: 'blur' }],
})
// 点击登录
async function submitForm() {
    // 先校验 
    // ruleFormRef.value 获取表单实例对象 validate是表单上面的内置方法

    // 方式一
    // ruleFormRef.value.validate(async (isValid: boolean) => {
    //     if (isValid) {
    //         // 校验通过的逻辑
    //         let loginRes = await http.adminLoginApi({
    //             password: ruleForm.pwd,
    //             username: ruleForm.username
    //         })
    //     } else {
    //         // 校验没有通过的逻辑
    //         console.log('校验没有通过');
    //     }
    // })

    // 方式二
    // ruleFormRef.value.validate().then(() => {
    //     // 校验通过的逻辑
    // }).catch(() => {
    //     // 校验没有通过的逻辑
    // })

    // 方式三
    try {
        await ruleFormRef.value.validate();
        // 校验通过的逻辑
        let loginRes = await http.admin.adminLoginApi({
            password: ruleForm.pwd,
            username: ruleForm.username
        })
        if (loginRes.code === 200) {
            Cookies.set('token', loginRes.data.tokenHead + loginRes.data.token)
            // 获取当前登录用户信息
            // const AdminInfoData = await http.admin.getAdminInfoApi();
            // 更新userStore里面state里面的menus
            // userStore.updateMenus(AdminInfoData.data.menus)
            // 跳转到首页
            router.push('/index')
        } else {
            ElMessage.error(loginRes.message || '登录失败')
        }

    } catch (err) {
        console.log('没有通过校验');
    } finally {
        console.log('无论成功失败，都会执行');
    }

}
</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    background-color: #2d3a4b;
    height: 100vh;
    position: relative;

    .center {
        position: absolute;
        text-align: center;
        width: 400px;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);

        h2 {
            text-align: center;
            color: white;
            height: 50px;
            line-height: 50px;
            font-size: 24px;
        }


        // :deep(.el-form-item__content) {
        //     display: flex;
        //     flex-wrap: nowrap;
        // }

        :deep(.el-input__wrapper) {
            background-color: #283443;

        }

        :deep(.el-input__inner) {
            height: 45px;

        }

        :deep(.el-button--primary) {
            width: 100%;
        }
    }

}
</style>